#include("common.html")
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>商城</title>
    
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <link rel="stylesheet" type="text/css" href="#(tpath)/static/css/vant.css">
    <link rel="stylesheet" type="text/css" href="#(tpath)/static/css/filter.css">
    <script type="text/javascript" src="#(tpath)/static/js/jquery.js"></script>
  </head>
  
  <body class="">
    <style type="text/css">@media only screen and (min-width: 320px){ html { font-size: 62.5% !important; } } @media only screen and (min-width: 640px){ html { font-size: 125% !important; } } @media only screen and (min-width: 750px){ html { font-size: 150% !important; } } @media only screen and (min-width: 1242px){ html { font-size: 187.5% !important; } }</style>
    <!-- 样式 S -->
    <style type="text/css" lang="less">.van-card{background:#fff;padding:0} .van-card__row .van-card__desc{padding:5px 0;} .van-button--normal{padding:0 10px;} .van-cell{padding:10px;position: relative;} .van-cell-text{color:#999;} .van-card:not(:first-child){margin-top:0;} .van-checkbox__label{color:#999;} .van-submit-bar .clear_cart{margin-left:10px;height:35px;line-height:35px;flex: 0.5;} .van-swipe-cell{border-bottom: 1px solid #f2f3f5;} .van-swipe-cell__right{ display: inline-block; width: 50px; height: 120px; background-color: #F44; color: #FFFFFF; text-align: center; font-size: 14px; line-height: 109px; margin: 0px; } .van-edit-address {color: #38f;} .check_icon{height:100px;line-height:100px;float:left} .van-icon-circle{color:#999;vertical-align:middle;padding-left: 8px; padding-right: 8px;} .van-icon-checked{color:#06bf04;vertical-align:middle;padding-left: 8px; padding-right: 8px;} .van-tag{margin-right:5px;font-size:12px} .van-submit-bar__price::first-letter{font-size:inherit} .title{font-size:14px; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; height:4rem; } .van-card__price{font-size:14px;font-weight:normal;margin-bottom: 10px;} .van-card__footer{ width: 50px; height: 100px; color: #FFFFFF; text-align: center; font-size: 14px; background-color: #F44; line-height: 100px;} .van-card__content{margin-right:10px} .van-stepper__minus, .van-stepper__plus,.van-stepper__input{height:29px} .van-stepper__input{box-sizing:border-box} .desc{padding:3px 0;color:#c1c1c1;font-size:12px;} .van-submit-bar__price{font-size:14px} .all-goods{ width: 100%; padding: 10px 10px; box-sizing: border-box; display: flex; border-bottom: 1px solid #f2f3f5; } .all-goods-flex{ flex: 1; } .all-goods-finish{ width: 100%; text-align: right; } .van-card__content{ height: 100px; } .suspend{ width: 100%; height: 100%; position: relative; z-index: 999; background-color: rgba(0,0,0,.6); position: fixed; top: 0; left: 0; } .suspend-content{ width: 244px; height: 55px; position: fixed; top: 70%; z-index: 900; } .suspend-content-left{ width: 44px; height: 40px; background-color: rgba(0,0,0,.6); color: #fff; font-size: 8px; padding: 3px; box-sizing: border-box; border-top-left-radius:5px; border-bottom-left-radius:5px; margin-top: 10px; float: left; } .suspend-icon{ float: left; width: 10px; height: 30px; padding: 5px 0px; margin-right: 3px; font-size: 14px; } .suspend-navigation{ float: left; width: 25px; height: 30px; padding:0px; box-sizing: border-box; font-size: 10px; } .suspend-navigation2{ float: left; width: 25px; height: 30px; padding: 8px 0px; box-sizing: border-box; font-size: 10px; } .suspend-content-right{ width: 200px; height: 60px; background-color: #fff; float: left; border-top-left-radius:5px; border-bottom-left-radius:5px; padding: 15px 10px; box-sizing: border-box; } .suspend-content-right .van-col{ text-align: center; } .suspend-contact{ font-size: 20px; } .suspend-contact-text{ font-size: 10px; transform: scale(0.7); } .wechat-customer .wechat-bg{background:#333;opacity:0.5;width:100%;z-index:999;position:fixed;top:0;bottom:0;} .wechat-customer .wechat-cont{width:12rem;background:#fff;border-radius:5px;position:fixed;top:50%;left:50%;margin-left:-8rem;z-index:999;text-align:center;padding:2rem;margin-top:-10rem;} .wechat-customer .wechat-cont img{width:10rem;height:10rem;} .wechat-customer .wechat-cont .closewindow{position:absolute;right:1rem;top:1rem;} .wechat-customer .wechat-cont .button1{width: 12rem; height: 2rem; line-height: 2rem; border: 0px; margin: 0rem auto 0 auto; color: #999; font-size: 12px;} .wechat-customer .wechat-cont .button2{width:12.1rem;height:2rem;background:#2ba246;color:#fff;border:1px solid #2ba246;margin-top:0.5rem;} .cart-null-head{ padding: 40px 10px 0px; box-sizing: border-box; width: 100%; font-size: 14px; text-align: center; } .recommend-content{ padding: 0px 10px; box-sizing: border-box; width: 100%; font-size: 12px; margin-top: 40px; } .null-coupon{ width: 70px; height: 80px; } .null-tt{ margin-top: 15px; } .null-select{ margin-top: 15px; font-size: 12px; color: #d9d9d9; } .no-data{ width: 100%; height:100%; padding-top: 200px; text-align: center; font-size: 12px; color: #d9d9d9; } .recommend-title{ border-left: 3px solid #f44; padding: 0px 5px; box-sizing: border-box; } .friends-goodslist{ width: 100%; margin-top: 10px; padding: 0px 5px; box-sizing: border-box; } .friends-goodslist.van-tabs--line .van-tabs__wrap{border-bottom:1px solid #e5e5e5;} .friends-goodslist .van-col{ background:#fff; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical;} .friends-goodslist .van-col--12{width:47%;margin: 5px;} .friends-goodslist .van-col--12 .pro-img{text-align:center;} .friends-goodslist .van-col--12 .pro-title{ color: #333; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; margin: 5px; height: 2.8rem; font-size: 12px; box-sizing: border-box; } .friends-goodslist .van-col--12 .pro-price .currency{font-size:12px;} .friends-goodslist .van-col--12 .pro-price{padding:0px 5px 5px 5px;box-sizing: border-box;} .friends-goodslist .van-col--12 .pro-price .price{font-size:13px;} .friends-goodslist .van-col--12 .sale-num{font-size:12px;color:#999;padding-top:0.2rem;} .friends-goodslist .pro-price .van-col--14{padding-left:2%;} .friends-goodslist .pro-price .van-col--10{padding-right:2%;text-align:right;} .pro-img{ width: 100%; text-align: center; } .pro-img img{ width: 9rem; height: 9rem; } /* 购物车分享Start */ .share{box-sizing: border-box;padding: 10px;width: 100%;} .share .van-button--large{height:40px;line-height:40px;} .share .van-button--round{border-radius:10px;} .share #shareImage{width:300px;text-align: center;} .share #shareImageBox{width:300px;margin: 0 auto;} .share-footer{padding:5px;} .share-footer .van-row{padding: 5px 0;} .share-text{margin: 0;font-size: 12px;color: #333;transform: scale(0.8);margin-left: -3px;} .share-box{position: absolute;right: 0px;top: 5px;} .share_title{text-align:center;font-size:14px;position: relative;} .share_title span{position:absolute;top:2px;right:0;} #cart .van-address-list__edit{right:30px} #cart .van-address-list{height:94%;overflow-y:scroll;padding-bottom:0;} #cart .addrList{top:10%;padding-bottom:50px} #cart .addAddr{top:35%;padding-bottom:0} .share_cart{ position: fixed; top: 80%; right: 0; z-index: 900; width: 44px; height: 40px; background-color: rgba(0,0,0,.6); color: #fff; font-size: 12px; padding: 12px 0px; box-sizing: border-box; border-top-left-radius: 5px; border-bottom-left-radius: 5px; text-align: center; } .seckill-price{ text-decoration:line-through } .cart-goods .van-cell-group{margin: 1.2rem 1.2rem 0 1.2rem;border-radius:0.6rem;} .cart-goods{ padding-bottom: 60px; } .all-goods-flex .country{width:3rem;float:right;} .pro-img{width:100%;} .margin-value{margin:1rem;} .margin-value .van-icon-circle{margin-top:3.5rem;} .margin-value .van-icon-checked{margin-top:3.5rem;}
      .van-stepper{margin-top:-1rem;} .submit-bar{ z-index: 100; position: fixed; bottom: 0; left: 0; width: 100%; -webkit-user-select: none; user-select: none; } .submit-bar-tip{ padding: 5px 16px; box-sizing: border-box; color: #f56723; font-size: 12px; background-color: #fff7cc; } .submit-bar__bar{ display: flex; -webkit-align-items: center; align-items: center; height: 50px; background-color: #fff; font-size: 14px; } .cart-clear { margin-left: 10px; height: 35px; line-height: 35px; flex: 0.5; } .submit-bar__text{ flex: 1; color: #333; font-weight: 500; text-align: right; margin-right: 8px; } .bt-submit{ width: 110px; color: #fff !important; border-radius: 0px; height: 100%; border-width: 0px; } .bt-submit2{ width: 110px; color: #fff !important; opacity: 0.6; border-radius: 0px; height: 100%; border-width: 0px; } /* 购物车分享End */</style>
    <!-- 样式 S -->
    <!-- 内容 S -->
    <div id="cart" class="container">
      <div class="cart-goods">
      	<!-- start -->
      	#if(currentCart.cartItems?? && currentCart.cartItems.size()>0)
        <div class="van-cell-group van-hairline--top-bottom">
          <div class="van-swipe-cell">
          
          	#for(cartItem : currentCart.cartItems)
          	<!-- start -->
            <div class="van-swipe-cell__wrapper" style="transform: translate3d(0px, 0px, 0px); transition: all 0.6s cubic-bezier(0.18, 0.89, 0.32, 1) 0s;">
              <!---->
              <div class="margin-value">
                <div class="van-row">
                  <input type="hidden" name="price" value="#(cartItem.price)"/>
                  <input type="hidden" name="cartItemId" value="#(cartItem.id)"/>
                  <div class="van-col van-col--2">
                    <i class="van-icon #if(cartItem.isSelect && cartItem.quantity>0) van-icon-checked #else van-icon-circle #end itemCheck" style="font-size: 20px;" quantity="#(cartItem.quantity)">
                      <!---->
                      <!----></i>
                  </div>
                  <div class="van-col van-col--6">
                    <div style="padding: 0.5rem;">
                      <a href="#(cartItem.product.path)">
                        <img src="#(imageUrl(cartItem.product.image))" class="pro-img" width="78.3" height="78.3"></a>
                    </div>
                  </div>
                  <div class="van-col van-col--16">
                    <div class="title">
                      <!---->
                      <!---->
                      <!---->#(abbreviate(cartItem.product.name,15,'...'))</div>
                    <div class="desc"></div>
                    <div>
                      <div class="van-col van-col--10" style="color: rgb(42, 101, 170);">
                        <span>￥ #(cartItem.price)</span></div>
                      <div class="van-col van-col--14">
                        <div class="van-stepper" productId="#(cartItem.productId)">
                          <button class="van-stepper__minus #if(cartItem.quantity<=1)van-stepper__minus--disabled#end"></button>
                          <input type="number" name="quantity" disabled="disabled" class="van-stepper__input quantity" value="#(cartItem.quantity)" stock="#(cartItem.product.stock)">
                          <button class="van-stepper__plus #if(cartItem.quantity>=cartItem.product.stock)van-stepper__minus--disabled#end"></button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="deleteCartItem" cartItemId="#(cartItem.id)" style="right: 35px;position: absolute;top: 0px;">
                <span>删除</span></div>
            </div>
             #end
            <!-- end -->
            
          </div>
        </div>
        <!-- end -->
        #end
        
      </div>
      <div class="submit-bar">
        <!---->
        <div class="submit-bar__bar">
          <div class="cart-clear" id="clearCart">清空购物车</div>
          <div class="submit-bar__text" style="color: rgb(42, 101, 170);">合计：￥ <span id="totalPrice">#(currentCart.totalPrice)</span></div>
          <button class="bt-submit" style="background-color: rgb(42, 101, 170);" #if(currentCart.cartItems?? && currentCart.cartItems.size()>0) onclick="addOrder()" #end>提交订单</button></div>
      </div>
      <!---->
      <!----></div>
    <!-- 内容 S -->
</html>
<script type="text/javascript">

//页面返回 强刷
//页面可见性改变事件
    document.addEventListener("visibilitychange", function () {
        window.location.reload(true);
    });

    window.onpageshow = function (e) {
        if (e.persisted) {
            window.location.reload(true);
        }
    }


$(".itemCheck").on("click",function(){
	if($(this).hasClass("van-icon-checked")){
		$(this).removeClass("van-icon-checked");
		$(this).addClass("van-icon-circle");
	}else{
		var quantity = parseInt($(this).attr("quantity"));
		if(quantity<1){
			alert("库存不足,不能购买")
			return;
		}
		$(this).addClass("van-icon-checked");
		$(this).removeClass("van-icon-circle");
	}
	calculatePrice();
});

function calculatePrice(){
	var items = $("#cart").find(".van-row").find(".van-icon-checked");
	var total=0;
	var selectCartItemIds="";
	$.each(items,function(index,item){
		var price = $(item).closest(".van-row").find("input[name='price']").val();
		var quantity = $(item).closest(".van-row").find("input[name='quantity']").val();
		var cartItemId = $(item).closest(".van-row").find("input[name='cartItemId']").val();
		var sub = parseFloat(price)*parseInt(quantity);
		total+=sub;
		selectCartItemIds+=","+cartItemId;
	});
	$("#totalPrice").html(toDecimal2(total));
	if(selectCartItemIds!=""){
		selectCartItemIds = selectCartItemIds.substring(1);
	}
	choose(selectCartItemIds);
}

function toDecimal2(x) {  
    var f = parseFloat(x);  
    if (isNaN(f)) {  
        return false;  
    }  
    var f = Math.round(x*100)/100;  
    var s = f.toString();  
    var rs = s.indexOf('.');  
    if (rs < 0) {  
        rs = s.length;  
        s += '.';  
    }  
    while (s.length <= rs + 2) {  
        s += '0';  
    }  
    return s;  
}  

$(".van-stepper__minus").on("click",function(){
	var number = parseInt($(this).parent().find(".quantity").val());
	if(number<=1){
		return;
	}
	number--;
	$(this).parent().find(".quantity").val(number);
	if(number<=1){
		$(this).addClass("van-stepper__minus--disabled");
	}
	$(this).parent().find(".van-stepper__plus").removeClass("van-stepper__minus--disabled");
	var productId = $(this).parent().attr("productId");
	updateQuantity(productId,number);
	calculatePrice();
});

$(".van-stepper__plus").on("click",function(){
	var number = parseInt($(this).parent().find(".quantity").val());
	var stock = parseInt($(this).parent().find(".quantity").attr("stock"));
	if(number>=stock){
		alert("库存不足");
		return;
	}
	number++;
	$(this).parent().find(".quantity").val(number);
	$(this).parent().find(".van-stepper__minus").removeClass("van-stepper__minus--disabled");
	if(number>=stock){
		$(this).parent().find(".van-stepper__plus").addClass("van-stepper__minus--disabled");
	}
	
	var productId = $(this).parent().attr("productId");
	updateQuantity(productId,number);
	calculatePrice();
});


//更新购物车数量
function updateQuantity(productId,quantity){
	$.ajax({
        url: "#(base)/cart_item/update",
        type: "post",
        data: {"productId":productId,"quantity":quantity,"type":1},
        dataType: "json",
        success: function(res){
        	var quantity = res.quantity;
        },
        error: function(res){
        }
    });
}

$(".deleteCartItem").on("click",function(){
	var cartItemId = $(this).attr("cartItemId");
	deleteCartItem(cartItemId);
});

$("#clearCart").on("click",function(){
	
	$.ajax({
        url: "#(base)/cart_item/deleteAll",
        type: "post",
        data: {},
        dataType: "json",
        success: function(res){
        	location.reload();
        },
        error: function(res){
        }
    });
});

function choose(cartItemIds){
	$.ajax({
        url: "#(base)/cart_item/choose",
        type: "post",
        data: {"ids":cartItemIds},
        dataType: "json",
        success: function(res){
        },
        error: function(res){
        }
    });
}

function addOrder(){
	var items = $("#cart").find(".van-row").find(".van-icon-checked");
	if(items.length<1){
		alert("请选择商品");
		return;
	}
	location.href="#(base)/order/add";
}

//删除购物项
function deleteCartItem(cartItemId){
	
	$.ajax({
        url: "#(base)/cart_item/delete",
        type: "post",
        data: {"id":cartItemId},
        dataType: "json",
        success: function(res){
        	location.reload();
        },
        error: function(res){
        }
    });
	
}

</script>